<template>
  <view class="whole">
    <view class="top_view"></view>
    <view class="title">
      <image
        src="../../static/jiantous.png"
        mode=""
        style="width: 34rpx; height: 34rpx; margin-left: 30rpx"
        @click="returns()"
      ></image>
      <text style="font-size: 34rpx; color: #ffffff; font-weight: bold"
        >邀请人数</text
      >
      <view style="opacity: 0.01"> 1123</view>
    </view>
    <view class="">
      <view class="top" @click="toInvitationRanking">
        <view class="top_left">
          <view class="top_left_top">
            <text>我的邀请人数</text>
            <text class="top_left_top_item">{{ lengths }}</text>
          </view>
          <text>查看完整排行榜 </text>
        </view>
        <image
          src="../../static/jiantou.png"
          mode=""
          style="width: 28rpx; height: 28rpx"
        ></image>
      </view>
      <view class="bottom" v-if="wholestate">
        <view class="bottom_top" style="">
          <text>人数列表</text>
        </view>
        <view class="bottom" v-if="list.invitation_logs != 0">
          <scroll-view
            scroll-y="true"
            style="max-height: 500px"
            @scrolltolower="scrollLower"
          >
            <block
              v-for="(item, index) in list.invitation_logs"
              :key="index"
              @scrolltolower="scrollLower"
            >
              <view class="bottom_list">
                <view class="bottom_list_left">
                  <image
                    :src="item.avatar"
                    style="width: 80rpx; height: 80rpx; border-radius: 45%"
                    mode="scaleToFill"
                    v-if="item.avatar != null"
                  ></image>
                  <image
                    src="/static/default-avatar.png"
                    style="width: 80rpx; height: 80rpx"
                    mode="scaleToFill"
                    v-else
                  ></image>
                  <!-- <image  src="/static/default-avatar.png" style="width: 80rpx;height: 80rpx;" mode="scaleToFill" ></image> -->
                  <text style="font-weight: 500; margin-left: 20rpx">{{
                    item.be_invitation_user.account
                  }}</text>
                </view>
                <view class="bottom_list_right">
                  <text>{{ item.created_at }}</text>
                </view>
              </view>
              <view
                style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
              ></view>
              <view
                class=""
                style="
                  text-align: center;
                  padding: 30rpx 0 0rpx;
                  color: #666666;
                "
                v-if="index == list.invitation_logs.length - 1 && lengthsstate"
              >
                <text style="">— 没有更多啦 —</text>
              </view>
            </block>
          </scroll-view>
        </view>
        <view v-else>
          <image
            src="/static/NoData.png"
            mode=""
            style=""
            class="Nodata"
          ></image>
          <view
            class=""
            style="text-align: center; padding: 0rpx 0 30rpx; color: #666666"
          >
            <text style="">— 暂无数据 —</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      list: [],
      lengths: "",
      Ranking: "",
      lengthsstate: false,
      page: 1,
      wholestate: false,
    };
  },
  onLoad() {},
  onShow() {
    // this.info()
    this.invitationList();
  },
  methods: {
    scrollLower(e) {
      this.page++;
      this.invitationList();
    },
    async info() {
      let res = await api.info({});
      this.lengths = res.data.invitation_num;
      uni.setStorageSync("userInfo", res.data);
    },
    scrollLower(e) {
      this.page++;
      this.invitationList();
    },
    async invitationList() {
      let res = await api.invitationList({
        query: {
          page: this.page,
        },
      });
      // this.list = res.data.invitation_logs
      if (res.code == 0) {
        this.wholestate = true;
        this.lengths = res.data.invitation_num;
        if (this.page == 1) {
          this.list = res.data;
          this.Ranking = res.data.current_ranking;
          if (res.data.invitation_logs.length < 9) {
            this.lengthsstate = true;
          }
        } else {
          // this.list = [...this.list,...res.data.invitation_ranking]
          if (res.data.invitation_logs.length == 0) {
            this.lengthsstate = true;
          }
          res.data.invitation_logs.forEach((el, index) => {
            this.list.invitation_logs.push(res.data.invitation_logs[index]);
          });
        }
        this.list.invitation_logs.forEach((el) => {
          var reg = /^(\d{3})\d{4}(\d{4})$/;
          el.be_invitation_user.account = el.be_invitation_user.account.replace(
            reg,
            "$1****$2"
          );
        });
        // this.list.invitation_logs.be_invitation_user.account = this.list.invitation_logs.be_invitation_user.account.replace(reg, "$1****$2");
        console.log(this.list.invitation_logs, "this.list.invitation_logs");
      }
    },
    returns() {
      uni.navigateBack({
        delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    toInvitationRanking() {
      uni.navigateTo({
        url: "../Invitation_ranking/Invitation_ranking",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
  background-image: url("/static/background_login.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  .title {
    position: absolute;
    top: 116rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin: 0 40rpx;
    font-size: 28rpx;
    padding-top: 210rpx;
    .top_left {
      display: flex;
      flex-direction: column;
    }
    .top_left_top {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10rpx;
      .top_left_top_item {
        margin-left: 20rpx;
        font-size: 48rpx;
        // margin-bottom: 10rpx;
      }
    }
  }
  .bottom {
    border: 2rpx solid transparent;
    // background-color: $bg-color3;
    background: linear-gradient(
      180deg,
      rgba(64, 67, 67, 0) 0%,
      #1e2020 22%,
      #1e2020 100%
    );
    // margin: 40rpx 30rpx;
    margin: 40rpx 0;
    border-radius: 24rpx;
    .bottom_top {
      color: $text-color3;
      text-align: center;
      margin-top: 50rpx;
    }
    .bottom_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      margin: 30rpx 30rpx;
      .bottom_list_left {
        display: flex;
        align-items: center;
      }
    }
  }
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  background-image: url("/static/background_login.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;

  background-color: $bg-color1;
}
.Nodata {
  position: relative;
  left: 20%;
  transform: translate(0%, -0%);
  width: 400rpx;
  height: 300rpx;
  padding-top: 30rpx;
}
</style>
